<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>后台管理系统</title>
    <meta name="keywords" content="表格"/>
    <link href="/css/bootstrap.min.css" rel="stylesheet">
    <link href="/css/font-awesome.css" rel="stylesheet">
    <link href="/css/datatables.min.css" rel="stylesheet">
    <link href="/css/animate.css" rel="stylesheet">
    <link href="/css/style.css" rel="stylesheet">

    <script src="/js/vue.js"></script>

</head>
<body>
<div id="wrapper">
    <nav class="navbar-default navbar-static-side">
        <div class="sidebar-collapse">
            <ul class="nav metismenu" id="side-menu">
                <li style="margin-left: 80px;margin-top: 30px;">
                    <div class="dropdown profile-element"> <span>
									<img alt="image" class="img-circle"
                                         src="http://www.inspinia.net/img/profile_small.jpg"/>
								</span>
                        <span class="clear"> <span class="block m-t-xs">
										<strong style="color: white;">{{user.userName}}</strong>
									</span>
								</span>
                    </div>

                </li>

                        <li shiro:hasRole="admin">
                            <a href="index.html"><i class="glyphicon glyphicon-cog"></i>
                                <span class="nav-label">系统管理</span>
                            </a>
                            <ul class="nav nav-second-level">
                                <li><a href="javascript:openUrl('/web/system/userInfo.html')"><i
                                        class="glyphicon glyphicon-user"></i>用户管理</a></li>
                                <li><a href="javascript:openUrl('/web/system/roleList.html')"><i
                                        class="glyphicon glyphicon-minus-sign"></i>角色管理</a></li>
                                <li><a href="javascript:openUrl('/web/system/deptList.html')"><i
                                        class="glyphicon glyphicon-inbox"></i>权限管理</a></li>
                            </ul>
                        </li>

                <li shiro:hasAnyRoles="admin,dong">
                    <a href="index.html"><i class="glyphicon glyphicon-user"></i>
                        <span class="nav-label">人员档案</span>
                    </a>

                    <ul class="nav nav-second-level">

                        <li><a href="javascript:openUrl('/web/EmpInformation/EmpInformation.html')"><i
                                class="glyphicon glyphicon-tags"></i>员工基本信息维护</a>
                        </li>
                        <li><a href="javascript:openUrl('/web/EmpInformation/FileManage.html')"><i
                                class="glyphicon glyphicon-tags"></i>员工档案管理护</a>
                        </li>
                        <li><a href="javascript:openUrl('/web/EmpInformation/ContractManage.html')"><i
                                class="glyphicon glyphicon-folder-close"></i>员工合同管理</a>
                        </li>

                    </ul>

                </li>


                <li shiro:hasAnyRoles="admin,dong,manager">
                    <a href="index.html"><i class="glyphicon glyphicon-file"></i>
                        <span class="nav-label">人事调配</span>
                    </a>

                    <ul class="nav nav-second-level">

                        <li><a href="javascript:openUrl('/web/personal/perEmpInformation.html')"><i
                                class="glyphicon glyphicon-tags"></i>员工调动</a>
                        </li>

                        <li><a href="javascript:openUrl('/web/personal/personnelTransferList.html')"><i
                                class="glyphicon glyphicon-folder-close"></i>人事调动记录</a>
                        </li>

                    </ul>

                </li>

                <li  >
                    <a href="index.html"><i class="glyphicon glyphicon-calendar"></i>
                        <span class="nav-label">考勤管理</span>
                    </a>

                    <ul class="nav nav-second-level">

                        <li shiro:hasAnyRoles="admin,dong,manager,staff" ><a
                                href="javascript:openUrl('/web/atten/attenManage.html')"><i
                                class="glyphicon glyphicon-tags"></i>
                            考勤记录</a>
                        </li>

                        <li shiro:hasAnyRoles="admin,dong,manager"><a href="javascript:openUrl('/web/atten/salaryInfo.html')"><i
                                class="glyphicon glyphicon-folder-close"></i>薪酬记录</a>
                        </li>

                    </ul>

                </li>

                <li shiro:hasAnyRoles="admin,dong,manager">
                    <a href="index.html"><i class="glyphicon glyphicon-align-justify"></i>
                        <span class="nav-label">招聘管理</span>
                    </a>

                    <ul class="nav nav-second-level">

                        <li><a href="javascript:openUrl('/web/recruitment/apply.html')"><i
                                class="glyphicon glyphicon-tags"></i>
                            应聘记录</a>
                        </li>

                        <li><a href="javascript:openUrl('/web/recruitment/hiring.html')"><i
                                class="glyphicon glyphicon-folder-close"></i>招聘记录</a>
                        </li>

                    </ul>

                </li>

                <li>
                    <a href="index.html"><i class="glyphicon glyphicon-stats"></i>
                        <span class="nav-label">数据统计</span>
                    </a>

                    <ul class="nav nav-second-level">

                        <li><a href="javascript:openUrl('/web/dataStat/bmxz.html')"><i
                                class="glyphicon glyphicon-tags"></i>
                            部门薪资</a>
                        </li>

                        <li><a href="javascript:openUrl('/web/dataStat/cdzt.html')"><i
                                class="glyphicon glyphicon-folder-close"></i>考勤信息</a>
                        </li>
                        <li><a href="javascript:openUrl('/web/dataStat/xnx.html')"><i
                                class="glyphicon glyphicon-folder-close"></i>员工信息</a>
                        </li>

                    </ul>

                </li>


            </ul>

        </div>

    </nav>


    <div id="page-wrapper" class="gray-bg">

        <div class="row border-bottom">

            <nav class="navbar navbar-static-top" role="navigation" style="margin-bottom: 0">

                <div class="navbar-header">

                    <div style="position: fixed;top:10px;left:30%;">
                        <!-- 	<button class="btn btn-primary btn-sm">回到首页</button>
                            <button class="btn btn-primary btn-sm">修改密码</button> -->
                        <div style="position: absolute;left:100px;">
                            <a class="btn btn-primary btn-sm" href="/page/indexPage">
                                <span class="glyphicon glyphicon-home"></span>
                                回到首页
                            </a>
                        </div>
                        <div style="position: absolute;left:200px;">
                            <button class="btn btn-primary btn-sm" @click="openModal">
                                <span class="glyphicon glyphicon-user"></span>修改密码
                            </button>
                        </div>
                        <div style="position: absolute;left:300px;">
                            <a class="btn btn-primary btn-sm" href="/exit">
                                <span class="glyphicon glyphicon-asterisk"></span>
                                退出系统
                            </a>
                        </div>
                        <div style="position: absolute;left:800px;width: 400px;">
                            <h4>欢迎使用王二狗公司的人力资源管理系统</h4>
                        </div>

                    </div>

                </div>
            </nav>

        </div>


        <iframe style="height: 700px;border:  solid 1px white;" scrolling="auto" rameborder="0" src="/web/welcome.html"
                name="right" width="100%" height="100%">
        </iframe>
    </div>


    <!-- 模态框开始 -->
    <div id="one" class="modal fade" style="top:200px">
        <div class="modal-dialog">

            <div class="modal-content">
                <!--头部-->
                <div class="modal-header">
                    <h2 align="center">用户修改</h2>

                </div>
                <!--主题内容-->
                <div class="modal-body">
                    <form role="form" class="form-horizontal">
                        <div class="form-group">
                            <label class=" col-sm-2 control-label">姓名</label>
                            <div class=" col-sm-10">
                                <input type="text" disabled="disabled" class="form-control" v-model="user.userName"
                                       placeholder="请输入姓名">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2  control-label">旧密码</label>
                            <div class=" col-sm-10">
                                <input type="password" class="form-control" v-model="user.userPwd"
                                       placeholder="请输入旧密码">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2  control-label">新密码</label>
                            <div class=" col-sm-10">
                                <input type="password" class="form-control" v-model="user.newPwd"
                                       placeholder="请输入新密码">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2  control-label">新密码</label>
                            <div class=" col-sm-10">
                                <input type="password" class="form-control" v-model="user.newRpPwd"
                                       placeholder="请再次输入新密码">
                            </div>
                        </div>
                    </form>
                </div>

                <!--底部-->
                <div class="modal-footer">
                    <button class="btn btn-primary btn-sm" type="button" @click="closeWin"><span
                            class="glyphicon glyphicon-remove"></span>关闭
                    </button>
                    <button class="btn btn-primary btn-sm" type="button" @click="saveUser"><span
                            class="glyphicon glyphicon-save"
                    ></span>保存
                    </button>
                </div>

            </div>
        </div>
    </div>
</div>
<!-- Mainly scripts -->
</div>
<script src="/js/jquery-3.1.1.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/js/jquery.metisMenu.js"></script>
<script src="/js/jquery.slimscroll.min.js"></script>
<script src="/js/datatables.min.js"></script>
<script src="/js/inspinia.js"></script>
<script src="/js/pace.min.js"></script>
</body>

<script>
    new Vue({
        el: "#wrapper",
        data: {
            user: {
                userId: "",
                userName: "",
                userPwd: "",
                newPwd: "",
                newRpPwd: ""
            },
        }, methods: {
            saveUser: function () {
                if (this.user.userPwd === "") {
                    alert("旧密码不能为空!");
                } else if (this.user.newPwd === this.user.userPwd) {
                    alert("新密码不能和旧密码一样!")
                    this.user.newPwd = "";
                    this.user.newRpPwd = "";
                } else if (this.user.newPwd === "") {
                    alert("新密码不能为空!")
                    this.user.newPwd = "";
                    this.user.newRpPwd = "";
                } else if (this.user.newPwd !== this.user.newRpPwd) {
                    alert("两次密码不一致!");
                    this.user.newPwd = "";
                    this.user.newRpPwd = "";
                } else {
                    $.ajax({
                        url: "/sys-user/updatePwd",//请求地址
                        type: "post",
                        data: this.user,
                        contentType: "application/x-www-form-urlencoded",
                        dataType: "json",//返回的数据类型
                        success: function (data) {
                            alert(data.info);
                            console.log(data);
                            $("#one").modal("hide");
                        }
                    });
                }


            },
            //显示模态框
            openModal: function () {
                $("#one").modal("show");
                //清空
                this.user.userPwd = ""
                this.user.newPwd = "";
            },
            //关闭模态框
            closeWin: function () {
                $("#one").modal("hide")
            }

        },
        mounted() {
            this.user.userName = localStorage.getItem("userName");
            this.user.userId = localStorage.getItem("userId");
            console.log(this.user.userName);
            console.log(this.user.userId);

        }
    })
    // $(document).ready(function(){
    //     self.user.userName = localStorage.getItem("userName");});


    //打开页面
    function openUrl(url) {
        $("iframe").attr("src", url);
    }


</script>
</html>
